import React, { useEffect, useState } from "react"
import { useLocation, useNavigate, useRoutes } from "react-router-dom"
import routes from "./router"
import { Layout, Switch } from "antd"
import "animate.css"
import { MoonOutlined, SunOutlined, SearchOutlined } from "@ant-design/icons"
import "./App.less"
export default function App() {
  const { Header } = Layout
  const element = useRoutes(routes)
  const [activeTab, setActiveTab] = useState(4)
  const navigate = useNavigate()
  let location = useLocation()

  const tabs = ["分类", "标签", "归档", "知识库"]
  // 主题色开关
  const [activeSwitch, setActiveSwitch] = useState(false)

  // 切换主题色
  const handleSwitchChange = (checked) => {
    setActiveSwitch(checked)
  }

  const handleTabChange = (index) => {
    setActiveTab(index)
    switch (index) {
      case 0:
        navigate("/category/list")
        break
      case 1:
        navigate("/tag/list")
        break
      case 2:
        navigate("/archive/list")
        break
      case 3:
        navigate("/wiki/list")
        break
      case 4:
        navigate("/home")
        break
    }
  }

  useEffect(() => {
    // console.log("location.pathname", location.pathname)
    switch (location.pathname) {
      case "/category/list":
        setActiveTab(0)
        break
      case "/tag/list":
        setActiveTab(1)
        break
      case "/archive/list":
        setActiveTab(2)
        break
      case "/wiki/list":
        setActiveTab(3)
        break
      case "/home":
        setActiveTab(4)
        break
      default:
        setActiveTab(-1)
    }
  }, [location.pathname])

  return (
    <div className="app">
      <Layout>
        <div className="Layout first">
          <Header
            className="layout"
            style={{ height: "67px", alignItems: "center" }}
          >
            <div className="avatorBox">
              <img
                className="avator"
                src="https://img.quanxiaoha.com/quanxiaoha/f97361c0429d4bb1bc276ab835843065.jpg"
                alt="头像"
              />
              <span className="name">wtt的演示博客</span>
            </div>
            <div className="tabs">
              <ul>
                <li
                  className={activeTab === 4 ? "activeTab" : ""}
                  onClick={() => handleTabChange(4)}
                >
                  首页
                </li>
                {tabs.map((item, index) => (
                  <li
                    key={index}
                    style={{ marginLeft: "32px" }}
                    className={activeTab === index ? "activeTab" : ""}
                    onClick={() => handleTabChange(index)}
                  >
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            <div className="header-right">
              <Switch
                checkedChildren={<MoonOutlined />}
                unCheckedChildren={<SunOutlined />}
                onChange={handleSwitchChange}
                className={activeSwitch ? "activeSwitch" : "noActiveSwitch"}
              />
              <div className="searchArticle">
                <SearchOutlined />
                <span className="searchText">搜索文章 ...</span>
                <span className="shortcut">Ctrl K</span>
              </div>
              <div className="login">登录</div>
            </div>
          </Header>
        </div>
        <div
          className="Layout second "
          style={{ backgroundColor: "#f4f4f4", flex: "1" }}
        >
          <div className="layout" style={{ backgroundColor: "#f4f4f4" }}>
            {element}
          </div>
        </div>
        <div className="Layout" style={{ borderBottom: "none" }}>
          <div
            className="layout"
            style={{ height: "67px", alignItems: "center" }}
          >
            <span className="copyright">
              © 2025 仿<a href="https://www.quanxiaoha.com/">犬小哈.</a> All
              Rights Reserved.
            </span>
            <span className="copyright">
              备案号：<a href="#">京ICP备2020016734号</a>{" "}
            </span>
          </div>
        </div>
      </Layout>
    </div>
  )
}
